<template>
	<view style="padding-bottom: 100rpx;">
		<view class="header-box">
			<topTabBar :tabbarTitle="'订单详情'"></topTabBar>
			<view class="detail-top">
				<view class="detail-top-left">{{orderInfo.order_status_text}}</view>
				<image src="/static/me/money.png" mode=""></image>
			</view>
			<view class="detail-content">
				<image src="/static/me/people.png" mode=""></image>
				<view class="detail-content-right">
					<view class="detail-content-right-1">查看物流,请联系后台客服</view>
					<!-- <view class="detail-content-right-2">2024-10-21 12:21:45</view> -->
				</view>
			</view>
		</view>
		<view class="order-box">
			<view class="order-box-flex">
				<image class="location-img" src="/static/message/location.png" mode=""></image>
				<view class="location-content">
					<view class="content-top">
						{{orderInfo.address.name}} <text>{{orderInfo.address.phone}}</text>
					</view>
					<view class="content-bottom">
						{{orderInfo.address.Area.province}}{{orderInfo.address.Area.city}}{{orderInfo.address.Area.region}}{{orderInfo.address.detail}}
					</view>
				</view>
			</view>
		</view>
		<orderObj :orderObj="orderInfo.goods ? orderInfo.goods : orderInfo"  :isJifen="isJifen":orderType="3"></orderObj>
		<view class="order-msg">
			<view class="wrap-centent-title">
				<view class="wrap-centent-border"></view>
				<view class="wrap-centent-name">订单信息</view>
			</view>
			<view class="order-msg-1">
				订单编号<text>{{orderInfo.order_sn}}</text>
			</view>
			<view class="order-msg-1">
				下单时间<text>{{getTime(orderInfo.createtime)}}</text>
			</view>
		</view>
		<view class="detail-bottom" v-show="orderInfo.order_status == 2">
			<!-- @click="navigator('/pages/me/logistics/logistics')" -->
			<!-- 	<view class="detail-bottom-left" >
				查看物流,请联系后台客服
			</view> -->
			<view class="detail-bottom-right" @click="subGetW">
				确认收货
			</view>
		</view>
	</view>
</template>

<script>
	import topTabBar from '@/components/topTabBar.vue';
	import orderObj from '@/components/orderObj.vue'
	export default {
		components: {
			topTabBar,
			orderObj
		},
		data() {
			return {
				orderInfo: {},
				isJifen: 1 //1 其他 2 积分
			}
		},
		onLoad(options) {
			this.order_sn = options.order_sn
			this.isJifen = options.isJifen
			this.init();
		},
		methods: {
			// 确认收货
			subGetW() {
				this.$http('orders.orderConfirm', {
					order_sn: this.orderInfo.order_sn
				}, '确认中...').then(res => {
					if (res.code == 1) {
						uni.redirectTo({
							url: '/pages/index/purchaseSuccess/purchaseSuccess?typeImg=' + 1 + '&title=' +
								'收货成功' + '&typeBtn=' + 2
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			init() {
				this.$http('orders.getOrderDetails', {
					order_sn: this.order_sn
				}, '获取中...').then(res => {
					if (res.code == 1) {
						this.orderInfo = res.data
						console.log(this.orderInfo, 11)
					}
				})
			},
			navigator(url) {
				uni.navigateTo({
					url: url
				})
			},
			getTime(timestamp) {
				let date = new Date(parseInt(timestamp) * 1000);
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
	}

	.header-box {
		width: 100%;
		height: 374rpx;
		background-image: url('');
		background-size: contain;
		background-repeat: no-repeat;
		padding-top: 100rpx;
		position: relative;

		.detail-top {
			width: 702rpx;
			display: flex;
			justify-content: space-between;
			margin: 0 auto;

			.detail-top-left {
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 60rpx;
			}

			image {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.detail-content {
			width: 702rpx;
			height: 174rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background-color: #fff;
			display: flex;

			// padding-top: 50rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				margin: 50rpx 20rpx 0 20rpx;
			}

			.detail-content-right {
				margin: 50rpx 20rpx 0 10rpx;

				.detail-content-right-1 {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}

				.detail-content-right-2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 15rpx;
				}
			}
		}

	}

	.order-box {
		width: 665rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.order-box-flex {
			display: flex;

			.location-img {
				width: 80rpx;
				height: 80rpx;
				margin: 15rpx 20rpx 0 0;
			}

			.location-content {
				width: 550rpx;

				.content-top {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;

					text {
						margin-left: 20rpx;
					}
				}

				.content-bottom {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 20rpx;
				}
			}
		}
	}

	.order-msg {
		width: 665rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 16px 16px 16px 16px;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx;

		.wrap-centent-title {
			display: flex;
			margin-bottom: 30rpx;

			.wrap-centent-border {
				width: 8rpx;
				height: 28rpx;
				background: #287E34;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-top: 10rpx;
			}

			.wrap-centent-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 27rpx;
			}
		}

		.order-msg-1 {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;

			text {
				color: #333333;
				margin-left: 30rpx;
			}
		}
	}

	.detail-bottom {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		z-index: 200;
		bottom: 0;
		display: flex;
		justify-content: flex-end;

		.detail-bottom-left {
			// width: 144rpx;
			height: 56rpx;
			// background: #F6F6F6;
			// border-radius: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			// line-height: 56rpx;
			// text-align: center;
			margin: 40rpx 20rpx 0 0;
		}

		.detail-bottom-right {
			width: 144rpx;
			height: 56rpx;
			background: linear-gradient(90deg, #6AAE2B 0%, #1B7E38 100%);
			border-radius: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #fff;
			line-height: 56rpx;
			text-align: center;
			margin: 20rpx 20rpx 0 0;
		}

	}
</style>